<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>爱打印-iprint 在线快捷 文档打印</title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
		<style>
			.ip-row {
				margin-top: 40px;
				margin-bottom: 40px;
			}
			.ip-p{
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>
	<!-- 菜单导航 -->
	<div th:insert="~{front/head :: header}"></div>
	<div id="ctxPath" th:src="@{/}"></div>
		<!--主体-->
		<div class="layui-container">
			<!--商品购买-->
			<div class="layui-row ip-row">
				<div class="layui-col-md5">
					<img th:src="@{/img/doc.jpg}" />
				</div>
				<div class="layui-col-md7">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>文档快印 - 讲义/课件/论文/简历/学习资料</legend>
					</fieldset>
					<form class="layui-form" th:action="@{/order/upload}" id="fo" th:method="post" >
						<!--打印份数-->
						<div class="layui-form-item">
							<label class="layui-form-label">打印份数</label>
							<div class="layui-input-inline">
								<input name="count" required lay-verify="required|count" value="1" autocomplete="off" class="layui-input">
								<input name="title" value="document" type="hidden">
							</div>
						</div>
						<!--单面/双面打印-->
						<div class="layui-form-item">
							<label class="layui-form-label">单/双面打印</label>
							<div class="layui-input-block">
								<input type="radio" name="singleDouble" title="单面" price="0"   value="单面" checked="checked">
								<input type="radio" name="singleDouble" title="双面" price="0.1" value="双面">
							</div>
						</div>
						<!--纸张类型-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">纸张类型</label>
								<div class="layui-input-inline">
									<select name="pageType">
										<option  price="0"   value="黑白">黑白</option>
										<option  price="0.7" value="彩色">彩色</option>
									</select>
								</div>
							</div>
						</div>
						<!--纸张选择-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">纸张尺寸</label>
								<div class="layui-input-inline">
									<select name="pageSize">
										<option value="A3" price="0.1">A3</option>
										<option value="A4" price="0">A4</option>
										<option value="A5" price="0">B5</option>
									</select>
								</div>
							</div>
						</div>
						<!--装订方式-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">装订方式</label>
								<div class="layui-input-inline">
									<select name="craftwork">
										<option value="不装订" price="0">不装订</option>
										<option value="普通装订" price="0">普通装订</option>
										<option value="胶装" price="4">胶装</option>
									</select>
								</div>
							</div>
						</div>
						<!---->
						<blockquote class="layui-elem-quote">
							<p style="font-size: xx-large;color: red;" id="final">￥0.1元</p>
						</blockquote>
						<!--提交-->
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn-lg layui-btn-danger " lay-submit="" lay-filter="put">上传文件</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!--商品-->
			<div class="layui-row ip-row">
				<div class="layui-tab">
					<ul class="layui-tab-title">
						<li class="layui-this">商品详情</li>
						<li>打印指导</li>
					</ul>
					<div class="layui-tab-content">
						<!--详情信息-->
						<div class="layui-tab-item layui-show">
							<!--价格信息-->
							<div layui-row ip-row>
								<!--打印单价-->
								<div class="layui-col-md6">
									<fieldset class="layui-elem-field layui-field-title">
										<legend>打印价格表</legend>
									</fieldset>
									<table class="layui-table">
										<colgroup>
											<col width="150">
											<col width="100">
											<col width="100">
											<col width="100">
										</colgroup>
										<thead>
											<tr>
												<th>单价(元)</th>
												<th>纸张尺寸</th>
												<th>单面</th>
												<th>双面</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td rowspan="3">黑白打印</td>
												<td>B5</td>
												<td>0.10</td>
												<td>0.20</td>
											</tr>
											<tr>
												<td>B4</td>
												<td>0.10</td>
												<td>0.20</td>
											</tr>
											<tr>
												<td>B3</td>
												<td>0.20</td>
												<td>0.30</td>
											</tr>
											<tr>
												<td rowspan="2">彩色打印</td>
												<td>A4</td>
												<td>0.80</td>
												<td>1.50</td>
											</tr>
											<tr>
												<td>A3</td>
												<td>1.00</td>
												<td>2.00</td>
											</tr>
										</tbody>
									</table>
								</div>
								<!--装订单价-->
								<div class="layui-col-md6">
									<fieldset class="layui-elem-field layui-field-title">
										<legend>装订价格表</legend>
									</fieldset>
									<table class="layui-table" lay-even="" lay-skin="nob" lay-size="lg">
										<colgroup>
											<col width="70%">
											<col width="30%">
										</colgroup>
										<tbody>
											<tr>
												<td>单位 元/本</td>
											</tr>
											<tr>
												<td>普通装订</td>
												<td>0.00</td>
											</tr>
											<tr>
												<td>无线胶装-皮纹纸(空白)</td>
												<td>3.00</td>
											</tr>
											<tr>
												<td>无线胶装-皮纹纸(黑白打印)</td>
												<td>4.00</td>
											</tr>
											<tr>
												<td>无线胶装-铜版纸</td>
												<td>5.00</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!--提示信息-->
							<div class=" layui-row ip-row ">
								<fieldset class="layui-elem-field small ">
									<legend>
										<span class="layui-badge-dot "></span>
										<span class="layui-badge-dot layui-bg-orange "></span>
										<span class="layui-badge-dot layui-bg-green "></span> 温馨提示
										<span class="layui-badge-dot layui-bg-green "></span>
										<span class="layui-badge-dot layui-bg-orange "></span>
										<span class="layui-badge-dot "></span>
									</legend>
									<div class="layui-field-box ">
										<p>1、平台实行明码标价，将成本以及利润降到最低，将打印质量和真诚的服务回馈给客户；</p>
										<p>2、我们会在打印完成前后认真检查，但由于订单数目多，难免出现其他情况，当您收到订单后出现质量，数量配送时间等问题，请及时联系客户；</p>
										<p>3、文档目前只支持PDF格式，如果格式不符合请您转换后再进行上传；</p>
									</div>
								</fieldset>
							</div>
						</div>
						<!--打印指导-->
						<div class="layui-tab-item">
							<div class="layui-row">
								<fieldset class="layui-elem-field small ">
									<legend>
										 <p style="font-size: xx-large;color: red;" id="final">打印指导</p>
									</legend>
									<div class="layui-field-box ">
										<p class="ip-p">
											<span class="layui-badge-dot"></span>
											文档上传的格式必须是PDF格式，不会转换的小伙伴请在帮助中心查看转换方式，也可以联系客服帮忙。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-orange"></span>
											上传文档时，请确认文档参数，有特殊说明的一定要留言备注，如有疑问请联系客服
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-green"></span>
											一切打印资料给予保密处理，文件打印文笔立即删除，如需要再打印源文件请重新上传并下单，不便之处请谅解。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-cyan"></span>
											爱打印在线打印平台，专注于校园云打印，承诺普通文档打印，3小时内送达，如超出时间，请联系客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-blue"></span>
											配送时间说明：晚上8点之前完成付款的订单，正常当晚10点前送达(如遇校区关门等特殊情况，配送人员会电话联系)，晚8点之后的订单，正常是第二天10：30分之前送达。如遇特殊急件，请联系客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-black"></span>
											如订单配送至指定位置的，订单状态是已配送的状态。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-gray"></span>
											取件之后请及时检查文件，如有任何问题，都可以与客服联系，我们希望您拿到的都是满意的，爱打印时刻为您提供贴心便捷的打印服务。
										</p>
									</div>
								</fieldset>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--js-->
		<script th:src="@{/layui/layui.js}"></script>
		<script type="text/javascript ">
			layui.use('element', function() {
				var element = layui.element; 
			});
		</script>
		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$;
                var ctxPath = document.getElementById("ctxPath").getAttribute("src");
				//自定义验证规则
				form.verify({
					count: [/^(?!0)(?:[0-9]{1,3}|1000)$/,'数量必须在1到1000以内的数字']
				});
				//监听提交
				 form.on('submit(put)', function(data) {
					 var isLogin = false;
					 $.ajax({
							cache:true,
							type:"GET",
							url: ctxPath+"isLogin",
							async: false,
							success: function(data) {
								if(data == "yes") {
									isLogin = true;
								} else if(data == "no"){
									layer.msg("您还没有登陆,正在为您跳转到登陆页面！");
									setTimeout(function(){
										location.href=ctxPath+"login";
									},2000);
								}else{
									layer.msg("未知错误，请联系管理员！");
								}
							}
						});
					 return isLogin;
				}); 
				
				
				form.on('select()', function(data) {
					getPrice();
				});
				form.on('radio()', function(data) {
					getPrice();
				});
				/*遍历下拉选和单选框计算价格更改*/
				function getPrice() {
					var total = 0.1;
					$.each($("#fo ").find("select "), function() {
						var $e = $(this);
						var price = $e.find("option:checked ").attr("price ");
						total = total + parseFloat(price);
					});
					price = $("#fo ").find("input:checked ").attr("price ");
					total = total + parseFloat(price);
					$("#final ").text("￥ " + total + "元 ");
				}
			});
		</script>
	</body>

</html>